<template>
  <div class="head_bg">
    <div class="logo"></div>
    <div class="head_fun">
      <span><a href="javascript:void(0)" @click="router.replace('/')">首页</a></span>
      <span><a href="javascript:void(0)" @click="router.replace('/member/shopping_cart')">购物车</a></span>
      <span v-if="isLogin(user)"><img :src="user.avatar" title="点击进入会员中心" class="user-avatar"
                                        @click="router.replace('/member/info')">{{ user.nickname }}</span>
      <span v-if="isLogin(user)"><a href="javascript:void(0)" @click="logout">退出系统</a></span>
      <span v-if="!isLogin(user)"><a href="javascript:void(0)" @click="emit('show-modal', 1)">登录</a></span>
      <span v-if="!isLogin(user)"><a href="javascript:void(0)" @click="emit('show-modal', 2)">注册</a></span>
      <span><a href="#">APP下载</a></span>
      <span><a href="#">PC客户端</a></span>
    </div>
  </div>
</template>

<script setup>
import {ElMessage} from 'element-plus'
import {useRouter} from 'vue-router'
import apis from '@/config/api-config.js';
import getResponse from '@/assets/js/http-client.js';
defineProps({
  user: {
    type: Object,
    default: () => null,
    required: true
  }
})
const router = useRouter();
const emit = defineEmits(['clean:user', 'show-modal']);
const isLogin = (user) => {
  if (!user ||!user.id) {
    return false
  }
  return true
}
// 退出登录方法
const logout = async () => {
  if (!confirm('确定要退出登录吗？')) {
    return;
  }
  //调用退出登录接口
  let url = apis.member.logout.url;
  let type = apis.member.logout.type;
  const result = await getResponse(url, type);
  if (200 !== result.code) {
    ElMessage.warning(result.message);
    return;
  }
  //删除token
  localStorage.removeItem('wemall-token');
  emit('clean:user', {});
  await router.push({name: 'home'});
}
</script>

<style scoped>
/* 导航栏相关样式已保留在全局main.css中 */
.logo {
  width: 200px;
  height: 50px;
  border: 0px solid;
  background-image: url(@assets/img/logo.png);
  background-repeat: no-repeat;
  float: left !important;
}

.head_bg {
  background: url(@assets/img/title.jpg) repeat-x;
  height: 50px;
  line-height: 50px;
  background-position: 0 -2px;
}

.head_bg span {
  margin-right: 20px;
}

.head_fun {
  float: right;
  height: 50px;
}


.user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
  position: relative;
  top: 10px;
  cursor: pointer;
}

.user-nickname {
  margin-right: 15px;
  color: #333;
}

.logout-link {
  color: #1890ff;
  cursor: pointer;
  text-decoration: underline;
}

.logout-link:hover {
  color: #40a9ff;
}
</style>
